<template>
  <view class="practice-container">
    <!-- 头部区域 -->
    <view class="header">
      <view class="title">练习训练</view>
      <view class="subtitle">通过日常练习提升你的认知能力</view>
    </view>

    <!-- 练习模式选择 -->
    <view class="practice-modes">
      <view class="section-title">练习模式</view>
      <view class="modes-grid">
        <view 
          class="mode-card" 
          v-for="mode in practiceModes" 
          :key="mode.id"
          @click="startPractice(mode)"
        >
          <view class="mode-icon">{{ mode.icon }}</view>
          <view class="mode-name">{{ mode.name }}</view>
          <view class="mode-desc">{{ mode.description }}</view>
          <view class="mode-progress">
            <view class="progress-bar">
              <view 
                class="progress-fill" 
                :style="{ width: mode.progress + '%' }"
              ></view>
            </view>
            <text class="progress-text">{{ mode.progress }}%</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 每日挑战 -->
    <view class="daily-challenge">
      <view class="section-title">每日挑战</view>
      <view class="challenge-card">
        <view class="challenge-header">
          <view class="challenge-title">{{ dailyChallenge.title }}</view>
          <view class="challenge-reward">+{{ dailyChallenge.reward }}积分</view>
        </view>
        <view class="challenge-desc">{{ dailyChallenge.description }}</view>
        <view class="challenge-progress">
          <view class="progress-info">
            <text>进度: {{ dailyChallenge.current }}/{{ dailyChallenge.total }}</text>
          </view>
          <view class="progress-bar">
            <view 
              class="progress-fill" 
              :style="{ width: (dailyChallenge.current / dailyChallenge.total * 100) + '%' }"
            ></view>
          </view>
        </view>
        <button 
          class="challenge-btn" 
          :class="{ completed: dailyChallenge.completed }"
          @click="startDailyChallenge"
          :disabled="dailyChallenge.completed"
        >
          {{ dailyChallenge.completed ? '已完成' : '开始挑战' }}
        </button>
      </view>
    </view>

    <!-- 练习统计 -->
    <view class="practice-stats">
      <view class="section-title">练习统计</view>
      <view class="stats-grid">
        <view class="stat-item" v-for="stat in practiceStats" :key="stat.label">
          <view class="stat-value">{{ stat.value }}</view>
          <view class="stat-label">{{ stat.label }}</view>
        </view>
      </view>
    </view>

    <!-- 练习记录 -->
    <view class="practice-records">
      <view class="section-title">
        <text>最近练习</text>
        <text class="view-all" @click="viewAllRecords">查看全部</text>
      </view>
      <view class="records-list">
        <view 
          class="record-item" 
          v-for="record in recentRecords" 
          :key="record.id"
        >
          <view class="record-icon">{{ record.icon }}</view>
          <view class="record-info">
            <view class="record-name">{{ record.name }}</view>
            <view class="record-time">{{ record.time }}</view>
          </view>
          <view class="record-score">{{ record.score }}分</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 练习模式数据
const practiceModes = ref([
  {
    id: 1,
    name: '反应训练',
    icon: '⚡',
    description: '提升反应速度和注意力',
    progress: 75,
    type: 'reaction'
  },
  {
    id: 2,
    name: '记忆强化',
    icon: '🧠',
    description: '增强短期和长期记忆',
    progress: 60,
    type: 'memory'
  },
  {
    id: 3,
    name: '数字训练',
    icon: '🔢',
    description: '提高数字处理能力',
    progress: 45,
    type: 'number'
  },
  {
    id: 4,
    name: '视觉训练',
    icon: '👁️',
    description: '增强视觉感知能力',
    progress: 30,
    type: 'visual'
  }
])

// 每日挑战数据
const dailyChallenge = ref({
  title: '记忆大师挑战',
  description: '在60秒内记住15个数字序列',
  reward: 50,
  current: 2,
  total: 3,
  completed: false
})

// 练习统计数据
const practiceStats = ref([
  { label: '总练习时长', value: '12.5h' },
  { label: '本周练习', value: '8次' },
  { label: '连续天数', value: '5天' },
  { label: '平均得分', value: '85分' }
])

// 最近练习记录
const recentRecords = ref([
  {
    id: 1,
    name: '反应训练',
    icon: '⚡',
    time: '2分钟前',
    score: 92
  },
  {
    id: 2,
    name: '数字记忆',
    icon: '🔢',
    time: '1小时前',
    score: 78
  },
  {
    id: 3,
    name: '视觉训练',
    icon: '👁️',
    time: '昨天',
    score: 85
  }
])

// 开始练习
const startPractice = (mode) => {
  console.log('开始练习:', mode.name)
  // 根据练习类型跳转到对应页面
  const routeMap = {
    reaction: '/pages/reaction/reaction',
    memory: '/pages/memory/memory',
    number: '/pages/number/number',
    visual: '/pages/visual/visual'
  }
  
  const route = routeMap[mode.type]
  if (route) {
    uni.navigateTo({
      url: route + '?mode=practice'
    })
  }
}

// 开始每日挑战
const startDailyChallenge = () => {
  if (dailyChallenge.value.completed) return
  
  console.log('开始每日挑战')
  uni.navigateTo({
    url: '/pages/memory/memory?mode=challenge'
  })
}

// 查看所有记录
const viewAllRecords = () => {
  uni.navigateTo({
    url: '/pages/profile/profile?tab=records'
  })
}

// 页面加载时获取数据
onMounted(() => {
  loadPracticeData()
})

// 加载练习数据
const loadPracticeData = () => {
  // 从本地存储获取练习进度
  const savedProgress = uni.getStorageSync('practiceProgress')
  if (savedProgress) {
    practiceModes.value.forEach(mode => {
      if (savedProgress[mode.type]) {
        mode.progress = savedProgress[mode.type]
      }
    })
  }
  
  // 获取每日挑战状态
  const challengeStatus = uni.getStorageSync('dailyChallengeStatus')
  if (challengeStatus) {
    const today = new Date().toDateString()
    if (challengeStatus.date === today) {
      dailyChallenge.value.completed = challengeStatus.completed
      dailyChallenge.value.current = challengeStatus.current
    }
  }
}
</script>

<style lang="scss" scoped>
.practice-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx;
}

.header {
  text-align: center;
  padding: 40rpx 0;
  color: white;
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    opacity: 0.9;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .view-all {
    font-size: 24rpx;
    opacity: 0.8;
    text-decoration: underline;
  }
}

.practice-modes {
  margin-bottom: 40rpx;
  
  .modes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }
  
  .mode-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    padding: 30rpx;
    text-align: center;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    
    &:active {
      transform: scale(0.95);
    }
    
    .mode-icon {
      font-size: 48rpx;
      margin-bottom: 16rpx;
    }
    
    .mode-name {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .mode-desc {
      font-size: 22rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    
    .mode-progress {
      display: flex;
      align-items: center;
      gap: 12rpx;
      
      .progress-bar {
        flex: 1;
        height: 8rpx;
        background: #f0f0f0;
        border-radius: 4rpx;
        overflow: hidden;
        
        .progress-fill {
          height: 100%;
          background: linear-gradient(90deg, #667eea, #764ba2);
          transition: width 0.3s ease;
        }
      }
      
      .progress-text {
        font-size: 20rpx;
        color: #666;
      }
    }
  }
}

.daily-challenge {
  margin-bottom: 40rpx;
  
  .challenge-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    
    .challenge-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      
      .challenge-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }
      
      .challenge-reward {
        background: linear-gradient(90deg, #667eea, #764ba2);
        color: white;
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 22rpx;
      }
    }
    
    .challenge-desc {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    
    .challenge-progress {
      margin-bottom: 24rpx;
      
      .progress-info {
        font-size: 22rpx;
        color: #666;
        margin-bottom: 12rpx;
      }
      
      .progress-bar {
        height: 8rpx;
        background: #f0f0f0;
        border-radius: 4rpx;
        overflow: hidden;
        
        .progress-fill {
          height: 100%;
          background: linear-gradient(90deg, #667eea, #764ba2);
          transition: width 0.3s ease;
        }
      }
    }
    
    .challenge-btn {
      width: 100%;
      height: 80rpx;
      background: linear-gradient(90deg, #667eea, #764ba2);
      color: white;
      border: none;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-weight: bold;
      
      &.completed {
        background: #ccc;
        color: #999;
      }
      
      &:not(.completed):active {
        opacity: 0.8;
      }
    }
  }
}

.practice-stats {
  margin-bottom: 40rpx;
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }
  
  .stat-item {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    padding: 30rpx;
    text-align: center;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    
    .stat-value {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .stat-label {
      font-size: 22rpx;
      color: #666;
    }
  }
}

.practice-records {
  margin-bottom: 40rpx;
  
  .records-list {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  }
  
  .record-item {
    display: flex;
    align-items: center;
    padding: 24rpx 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .record-icon {
      font-size: 32rpx;
      margin-right: 20rpx;
    }
    
    .record-info {
      flex: 1;
      
      .record-name {
        font-size: 26rpx;
        color: #333;
        margin-bottom: 4rpx;
      }
      
      .record-time {
        font-size: 22rpx;
        color: #999;
      }
    }
    
    .record-score {
      font-size: 24rpx;
      font-weight: bold;
      color: #667eea;
    }
  }
}
</style>